<template>
    <div
      class="scroll-table"
      :style="{ height: height, '--base-border-color': borderColor }"
    >
      <table class="table">
        <tr :style="headerStyle">
          <th
            v-for="(col, index) in column"
            :key="index"
            :style="{
              width: col.width ? col.width : `calc(100% / ${column.length})`,
              textAlign:'center'
            }"
            :title="col.label"
          >
            {{ col.label }}
          </th>
        </tr>
      </table>
      <vue3-seamless-scroll
        :list="data"
        direction="up"
        :hover="hover"
        :limitScrollNum="1"
        :step="step"
        class="scroll"
      >
        <table class="table">
          <tr v-for="(row, rIndex) in data" :key="rIndex" class="hover_css" :style="columnStyle">
            <td
              v-for="(col, index) in column"
              :key="index"
              :style="{
                width: col.width ? col.width : `calc(100% / ${column.length})`,
                textAlign:'center'
              }"
              :title="row[col.prop]"
              
            >
            <div class="padding_css" :class="col.transverse?'scrolling-text':''">
              <span :title="row[col.prop]" :class="col.transverse?'the-text':''" style="margin: 0 auto;display: inline-block">{{ row[col.prop] }}</span>
            </div>
             
            </td>
          </tr>
        </table>
      </vue3-seamless-scroll>
    </div>
  </template>
  
  <script setup lang="ts">
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
  
  type Props = {
    height?: string;
    data?: any;
    column?: any;
    step?: number;
    hover?: boolean;
    direction?: any;
    borderColor?: string;
    headerStyle?: any;
    columnStyle?: any;
  };
  const props = withDefaults(defineProps<Props>(), {
    height: "300px",
    data: [],
    column: [],
    step: 0.6,
    hover: true,
    direction: "up",
  });
  
  const slots = useSlots();
  </script>
  
  <style scoped lang="scss">
  .overHide{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  $border-color: var(--base-border-color);
  .scroll {
    margin: 0px auto;
    overflow: hidden;
  }
  
  .scroll-table {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0px 4px;
      table-layout:fixed;
      tr {
        // border: 1px solid $border-color;
        border: none;
        background-color:#0D344B;
      }
    }
    td,
    th {
      text-align: var(--text-align);
      padding: 5px 10px;
      border: none;
    //   border: 1px solid $border-color;
    }
  }
  .scrolling-text {
    
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
  }
  .padding_css{
    height: 100%;
    width: 100%;
    margin: 0 5px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // display: flex;
    // flex-direction: row;
    // justify-content: flex-start;
    // align-content: center;
  }
  .the-text {
    display: inline-block;
    animation: marquee 20s linear infinite; /* 调整动画时长和效果 */
    
  }
  
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  </style>
  